<template>
	<view class="box">
		<!-- 用户评价 -->
		<view class="evaluation">
			<!-- 评价内容 -->
			<view class="econtent flex" v-for="(item,index) of list" :key="index">
				<view class="head-img">
					<image :src="item.avatar" mode=""></image>
				</view>
				<view class="eright">
					<view class="one fw-bt">
						<view class="f30 bold">{{item.nickname}}</view>
						<view class="time">{{item.create_time}}</view>
					</view>
					<!-- 评分 -->
					<view class="rate">
						<uni-rate :value="item.rate" size="12" color="#bbb" active-color="#FCA55E" :readonly="true"
							:is-fill="false" />
					</view>
					<!-- 文字 -->
					<view class="econ">
						<text>{{item.comment}}</text>
					</view>
					<view class="four flex">
						<view class="er-img" v-for="(item2,index2) in item.pics" :key="index2">
							
							<image :src="item2" mode="aspectFill" @click="prew(item2,item.pics)" v-if="isImageType(item2)"></image>
							<video :src="item2" v-else  style="width: 180rpx;height: 180rpx;"></video>
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				list: [],
				id: ''
			}
		},
		onLoad(e) {
			this.id = e.id
			this.getgoodsval(this.page)
		},
		onReachBottom() {
			this.getgoodsval(this.page + 1)
		},
		methods: {
			prew(c, arr) {
				uni.previewImage({
					current: c,
					urls: arr
				})
			},
			isImageType(str) {
				console.log(str)
				var index = str.lastIndexOf('.') // 获取指定字符串最后一次出现的位置，返回index
				var str = str.substr(index + 1)
				return ['png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff'].indexOf(str.toLowerCase()) !== -1
			},
			// 获取商品的评价
			getgoodsval(e) {
				uni.showLoading({
					mask: true
				})
				this.$request('store/product/reply/lst/' + this.id, {
					page: e,
					limit: 10,
					type: 'count'
				}, 'GET').then(res => {
					if (res.status == 200) {
						uni.hideLoading()
						if (e == 1) {
							this.list = res.data.list
						} else {
							if (res.data.list.length == 0) {
								uni.showToast({
									title: "暂无更多",
									icon: "none"
								})
								return
							}
							let list = this.list
							list = [...list, ...res.data.list]
							this.list = list
							this.page = e
						}



					}
				})

			},
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		padding: 0 30rpx;

		.myimg {
			width: 100%;
			height: 100%;
		}

		// 用户评价
		.evaluation {
			margin-top: 20rpx;
			border-radius: 12rpx;
			background-color: #fff;

			&>view:not(:last-child) {
				border-bottom: 1rpx solid #eee;
			}

			.econtent {
				padding: 32rpx 0 20rpx;

				.head-img {
					flex-shrink: 0;
					width: 80rpx;
					height: 80rpx;

					image {
						@extend .myimg;
						border-radius: 50%;
					}
				}

				.eright {
					margin-left: 30rpx;
					flex: 1;

					.time {
						color: #999;
						font-size: 22rpx;
					}

					.econ {
						margin-top: 30rpx;
						font-size: 26rpx;
						line-height: 40rpx;
					}

					.four {
						overflow: hidden;
						width: 580rpx;
						margin-top: 30rpx;
						flex-wrap: wrap;

						&>view:not(:nth-child(3n-2)) {
							margin-left: 20rpx;
						}

						.er-img {
							flex-shrink: 0;
							margin-bottom: 20rpx;
							width: 180rpx;
							height: 180rpx;

							image {
								@extend .myimg;
							}
						}
					}
				}
			}
		}
	}
</style>
